import 'dart:io';
import 'dart:math';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:signage/app/constants/template_constants.dart';
import 'package:signage/app/data/models/si_font.dart';
import 'package:signage/app/data/models/template_model.dart';
import 'package:signage/app/modules/profile/fontManager/controllers/font_manager_controller.dart';
import 'package:signage/app/widgets/board_widget.dart';
import 'package:signage/l10n/l10n.dart';
import 'package:signage/utils/eink_image_processor.dart';
import 'package:signage/widgets/ccolor_radio_group.dart';
import '../../../../../widgets/custom_appbar.dart';
import '../../../../data/models/board_element.dart';
import '../../../../../widgets/custom_radio_group.dart';
import '../controllers/edit_template_controller.dart';

class EditTemplateView extends GetView<EditTemplateController> {
  const EditTemplateView({super.key});

  @override
  Widget build(BuildContext context) {
    // 确保控制器已初始化
    WidgetsBinding.instance.addPostFrameCallback((_) {
      controller.initializeData();
    });

    return Obx(
      () => Scaffold(
        backgroundColor: const Color(0xFFF3F4F6),
        appBar: AppBar(
            backgroundColor: Colors.white,
            centerTitle: true,
            title: Container(
              width: 215.w,
              height: 44.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(37),
                color: Color.fromRGBO(243, 244, 246, 1),
              ),
              child: Center(
                child: Text(
                  controller.templateName.value,
                  style: TextStyle(fontSize: 16.sp),
                ),
              ),
            ),
            leading: IconButton(
              padding: EdgeInsets.zero,
              icon: Image.asset(
                'assets/images/Group 1321318317@2x.png',
                width: 20.w,
                height: 20.w,
              ),
              onPressed: () => Get.back(),
            ),
            actions: [
              IconButton(
                padding: EdgeInsets.zero,
                icon: Image.asset(
                  'assets/images/Group 1321318629@2x.png',
                  width: 25.w,
                ),
                onPressed: () => controller.previewImage(),
              ),
              IconButton(
                padding: EdgeInsets.zero,
                icon: Image.asset(
                  'assets/images/Group 1321318628@2x.png',
                  width: 23.w,
                ),
                onPressed: () => controller.saveTemplate(),
              ),
            ]),
        body: Column(
          children: [
            SizedBox(
              width: Get.size.width,
              child: BoardWidget(
                boardKey: controller.boardKey,
                aspectRatio: controller.aspectRatio.value,
                elements: controller.boardElements,
                canvasSize: controller.canvasSize.value,
                onElementSelected: controller.selectElement,
                onElementPositionChanged: controller.updateElementPosition,
                editable: true,
              ),
            ),
            Flexible(
              child: Obx(() {
                return controller.selectedIndex.value == 0
                    ? Column(
                        children: [
                          Container(
                            color: Colors.white,
                            child: Row(
                              children: [
                                Expanded(
                                  child: PreferredSize(
                                    preferredSize: Size(double.infinity, 50.h),
                                    child: Container(
                                      height: 50.h,
                                      child: TabBar(
                                        controller: controller.tabController,
                                        padding: EdgeInsets.only(left: 16.w),
                                        tabAlignment: TabAlignment.start,
                                        labelPadding: EdgeInsets.symmetric(
                                            horizontal: 10, vertical: 0),
                                        isScrollable: true,
                                        indicator: null,
                                        indicatorColor: Colors.transparent,
                                        dividerHeight: 0,
                                        tabs: [
                                          _buildTab(AppLocalizations.of(context)!.translate('all'), 0),
                                          _buildTab(AppLocalizations.of(context)!.translate('simple'), 1),
                                          _buildTab(AppLocalizations.of(context)!.translate('party'), 2),
                                          _buildTab(AppLocalizations.of(context)!.translate('agenda'), 3),
                                          _buildTab(AppLocalizations.of(context)!.translate('my_templates'), 4),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(bottom: 5.h),
                                  child: Row(
                                    children: [
                                      Container(
                                        width: 0.5.w,
                                        height: 18.h,
                                        decoration: BoxDecoration(
                                          color: Color(0XFF999999),
                                          borderRadius:
                                              BorderRadius.circular(2),
                                        ),
                                      ),
                                      12.horizontalSpace,
                                      // 新增下拉选择框
                                      PopupMenuButton<String>(
                                        elevation: 0,
                                        padding: EdgeInsets.zero,
                                        constraints: BoxConstraints(
                                          minWidth: Get.width,
                                        ),
                                        color: Colors.white,
                                        onSelected: (String newValue) {
                                          // 处理选择的尺寸
                                          controller.selectedSize.value =
                                              newValue;
                                          controller.loadTemplates();
                                        },
                                        position: PopupMenuPosition.under,
                                        itemBuilder: (BuildContext context) {
                                          return <String>[
                                            AppLocalizations.of(context)!.translate('all'),
                                            '800x480',
                                            '800x272'
                                          ].map<PopupMenuItem<String>>(
                                              (String value) {
                                            return PopupMenuItem<String>(
                                              value: value,
                                              child: Row(
                                                // 设置宽度为拉满
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: [
                                                  Text(value,
                                                      style: TextStyle(
                                                        fontSize: 14.sp,
                                                        color:
                                                            Color(0XFF333333),
                                                      )),
                                                  if (value ==
                                                      controller
                                                          .selectedSize.value)
                                                    Image.asset(
                                                        'assets/images/Group 1321318579@2x.png',
                                                        width: 22.w,
                                                        height: 22.h),
                                                ],
                                              ),
                                            );
                                          }).toList();
                                        },
                                        offset: Offset(0, 12.h),
                                        child: Row(
                                          children: [
                                            Text(controller.selectedSize.value,
                                                style: TextStyle(
                                                  fontSize: 14,
                                                  fontWeight: FontWeight.w400,
                                                  letterSpacing: 0,
                                                  color: Color(0XFF333333),
                                                )),
                                            8.horizontalSpace,
                                            Image.asset(
                                                'assets/images/Vector@2x (1).png',
                                                width: 12.w),
                                          ],
                                        ), // 显示提示文本
                                      ),
                                      16.horizontalSpace,
                                    ],
                                  ),
                                )
                              ],
                            ),
                          ),
                          Expanded(
                            child: Container(
                              decoration: BoxDecoration(
                                color: Color(0XFFF3F4F6),
                                borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(18),
                                  topRight: Radius.circular(18),
                                ),
                              ),
                              child: TabBarView(
                                controller: controller.tabController,
                                children: [
                                  _buildTemplateList(controller.allTemplates),
                                  _buildTemplateList(
                                      controller.simpleTemplates),
                                  _buildTemplateList(controller.partyTemplates),
                                  _buildTemplateList(
                                      controller.agendaTemplates),
                                  _buildTemplateList(controller.myTemplates),
                                ],
                              ),
                            ),
                          ),
                        ],
                      )
                    : SingleChildScrollView(
                        child: _buildElementEditor(
                            controller.selectedElement.value, controller),
                      );
              }),
            )
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          color: Colors.white,
          padding: EdgeInsets.only(left: 10.w, right: 10.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              _buildBottomButton(
                AppLocalizations.of(context)!.translate('template'),
                () => controller.showTemplatePicker(),
                'assets/images/Frame 6@2x.png',
                'assets/images/Frame 1@2x.png',
                controller.selectedIndex.value == 0,
              ),
              _buildBottomButton(
                AppLocalizations.of(context)!.translate('add_image'),
                () => controller.addImage(),
                'assets/images/Frame 7@2x.png',
                'assets/images/Frame 2@2x.png',
                controller.selectedIndex.value == 1,
              ),
              _buildBottomButton(
                AppLocalizations.of(context)!.translate('add_text'),
                () => controller.addText(),
                'assets/images/Frame 8@2x.png',
                'assets/images/Frame 3@2x.png',
                controller.selectedIndex.value == 2,
              ),
              _buildBottomButton(
                AppLocalizations.of(context)!.translate('add_color_block'),
                () => controller.addColorBlock(),
                'assets/images/Frame 9@2x.png',
                'assets/images/Frame 4@2x.png',
                controller.selectedIndex.value == 3,
              ),
              _buildBottomButton(
                AppLocalizations.of(context)!.translate('background'),
                () => controller.showBackgroundEditor(),
                'assets/images/Frame 10@2x.png',
                'assets/images/Frame 5@2x.png',
                controller.selectedIndex.value == 4,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildBottomButton(String text, VoidCallback onPressed,
      String selectedIcon, String unselectedIcon, bool isSelected) {
    return Expanded(
      child: GestureDetector(
        onTap: onPressed,
        child: Column(
          children: [
            Image.asset(
              isSelected ? selectedIcon : unselectedIcon,
              width: 34.w,
              height: 34.h,
            ),
            Text(
              text,
              style: TextStyle(
                color: Color(0xFF666666),
                fontSize: 12.sp,
                fontWeight: FontWeight.w600,
                letterSpacing: 0,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTemplateList(RxList<TemplateModel> templates) {
    return templates.isEmpty
        ? Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset(
                  'assets/images/Group 1321318735@2x.png',
                  width: 232.w,
                  height: 200.h,
                ),
                const SizedBox(height: 16),
                Text(
                  AppLocalizations.of(Get.context!)!.translate('no_templates'),
                  style: TextStyle(
                    fontSize: 15.sp,
                    color: Colors.black54,
                  ),
                ),
              ],
            ),
          )
        : GridView.builder(
            padding: const EdgeInsets.all(16),
            itemCount: templates.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 16, // 行间距
                crossAxisSpacing: 16, // 列间距
                childAspectRatio: 164 / 133),
            itemBuilder: (context, index) {
              final template = templates[index];
              return GestureDetector(
                onTap: () => controller.applyTemplate(template),
                child: Container(
                  padding: EdgeInsets.all(6.w),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(4),
                    border: Border.all(
                      color: Colors.white,
                    ),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Expanded(
                          child: Center(
                        child: AspectRatio(
                          aspectRatio: template.width / template.height,
                          child: Container(
                            width: double.infinity,
                            decoration: BoxDecoration(
                              color: Colors.grey[200],
                              borderRadius: BorderRadius.circular(4),
                              image: DecorationImage(
                                image: template.filePath.startsWith('assets/')
                                    ? AssetImage(template.filePath)
                                    : FileImage(File(template.filePath))
                                        as ImageProvider,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        ),
                      )),
                      6.verticalSpace,
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            // 添加 Expanded 以限制 Text 的宽度
                            child: Text(
                              template.name,
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                fontSize: 14,
                                fontWeight: FontWeight.w400,
                                letterSpacing: 0,
                                color: Color(0XFF333333),
                              ),
                            ),
                          ),
                          Text(
                            template.size,
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.w400,
                              letterSpacing: 0,
                              color: Color(0XFF666666),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              );
            },
          );
  }

  Widget _buildTab(String label, int index) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          label,
          style: TextStyle(
            fontSize: 16.sp,
            height: 26.h / 16.sp,
            color: Color(0XFF333333),
          ),
        ),
        controller.currentTab.value == index
            ? Image.asset(
                'assets/images/Vector@2x.png',
                width: 13.w,
                height: 5.h,
              )
            : SizedBox(height: 5.h)
      ],
    );
  }

  Widget _buildToolButton(IconData icon, String label, VoidCallback onPressed) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 8.w),
      child: TextButton.icon(
        icon: Icon(icon, size: 18),
        label: Text(label, style: TextStyle(fontSize: 12.sp)),
        onPressed: onPressed,
      ),
    );
  }

  Widget _buildAlignButton(
      IconData icon, String label, VoidCallback onPressed) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 8.w),
      child: TextButton.icon(
        icon: Icon(icon, size: 18),
        label: Text(label, style: TextStyle(fontSize: 12.sp)),
        onPressed: onPressed,
      ),
    );
  }

  Widget _buildElementEditor(
      BoardElement? element, EditTemplateController controller) {
    if (element is ImageBoardElement) {
      return ImageElementEditor(element: element, controller: controller);
    } else if (element is TextBoardElement) {
      return TextElementEditor(element: element, controller: controller);
    } else if (element is ColorBlockBoardElement) {
      return ColorBlockElementEditor(element: element, controller: controller);
    } else if (element is BackgroundBoardElement) {
      return BackgroundEditor(element: element, controller: controller);
    }
    return const SizedBox.shrink();
  }
}

class ImageElementEditor extends StatelessWidget {
  final ImageBoardElement element;
  final EditTemplateController controller;

  const ImageElementEditor(
      {super.key, required this.element, required this.controller});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Obx(() => Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: Get.width,
                height: 40.h,
                color: Color(0xFFFFFFFF),
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('image'),
                      style: TextStyle(
                        fontSize: 15.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF333333)
                      )
                    ),
                    GestureDetector(
                      onTap: () => controller.deleteElement(element.id),
                      child: Image.asset(
                        'assets/images/Group 1321318595@2x.png',
                        width: 29.w,
                        height: 25.h,
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('coordinates'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('horizontal'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        35.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  decoration: BoxDecoration(
                                    color: controller.getHorizontalAlignment(
                                                element) ==
                                            1
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: IconButton(
                                    icon: Image.asset(
                                      'assets/images/Group 1321318648@2x.png',
                                      width: 15.w,
                                    ),
                                    onPressed: () => controller.alignHorizontal(
                                        element.id, 1),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getHorizontalAlignment(
                                                element) ==
                                            2
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318650@2x (2).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller
                                          .alignHorizontal(element.id, 2),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getHorizontalAlignment(
                                                element) ==
                                            3
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318649@2x.png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller
                                          .alignHorizontal(element.id, 3),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('vertical'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        35.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  decoration: BoxDecoration(
                                    color: controller.getVerticalAlignment(
                                                element) ==
                                            1
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: IconButton(
                                    icon: Image.asset(
                                      'assets/images/Group 1321318648@2x (1).png',
                                      width: 15.w,
                                    ),
                                    onPressed: () =>
                                        controller.alignVertical(element.id, 1),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getVerticalAlignment(
                                                element) ==
                                            2
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318650@2x (2).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller.alignVertical(
                                          element.id, 2),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getVerticalAlignment(
                                                element) ==
                                            3
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318649@2x (1).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller.alignVertical(
                                          element.id, 3),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('style'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('width'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Text(
                          '0',
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        Expanded(
                          child: Obx(() => SliderTheme(
                              data: SliderThemeData(
                                overlayShape: SliderComponentShape.noOverlay,
                                trackHeight: 6.h,
                                thumbShape: RoundSliderThumbShape(
                                  enabledThumbRadius: 8.r,
                                ),
                              ),
                              child: Slider(
                                value: element.size.value.width,
                                max: Get.width,
                                onChanged: (value) {
                                  final currentRight =
                                      element.position.value.dx +
                                          element.size.value.width;
                                  final newWidth = value;

                                  if (currentRight >
                                      controller.canvasSize.value.width) {
                                    // 如果右超出边界，固定右边界，调整左边位置
                                    final newX =
                                        controller.canvasSize.value.width -
                                            newWidth;
                                    controller.updateElementPosition(
                                      element.id,
                                      Offset(newX, element.position.value.dy),
                                    );
                                  }

                                  controller.updateElementSize(
                                    element.id,
                                    Size(newWidth, element.size.value.height),
                                  );
                                },
                              ))),
                        ),
                        Text(
                          Get.width.toStringAsFixed(0),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        12.horizontalSpace,
                        Container(
                          width: 51,
                          height: 36,
                          decoration: BoxDecoration(
                            color: Color(0xFFFFFFFF),
                            borderRadius: BorderRadius.circular(4),
                            border:
                                Border.all(color: Color(0xF1F1F1FF), width: 1),
                          ),
                          alignment: Alignment.center,
                          child: Obx(() => Text(
                                '${element.size.value.width.round()}',
                                style: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF333333)),
                              )),
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('height'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Text(
                          '0',
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        Expanded(
                          child: Obx(() => SliderTheme(
                              data: SliderThemeData(
                                overlayShape: SliderComponentShape.noOverlay,
                                trackHeight: 6.h,
                                thumbShape: RoundSliderThumbShape(
                                  enabledThumbRadius: 8.r,
                                ),
                              ),
                              child: Slider(
                                value: element.size.value.height,
                                max: controller.canvasSize.value.height,
                                onChanged: (value) {
                                  final currentBottom =
                                      element.position.value.dy +
                                          element.size.value.height;
                                  final newHeight = value;

                                  if (currentBottom >
                                      controller.canvasSize.value.height) {
                                    // 如果底部超出边界，固定底部边界，调整顶部位置
                                    final newY =
                                        controller.canvasSize.value.height -
                                            newHeight;
                                    controller.updateElementPosition(
                                      element.id,
                                      Offset(element.position.value.dx, newY),
                                    );
                                  }

                                  controller.updateElementSize(
                                    element.id,
                                    Size(element.size.value.width, newHeight),
                                  );
                                },
                              ))),
                        ),
                        Text(
                          controller.canvasSize.value.height.toStringAsFixed(0),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        12.horizontalSpace,
                        Container(
                          width: 51,
                          height: 36,
                          decoration: BoxDecoration(
                            color: Color(0xFFFFFFFF),
                            borderRadius: BorderRadius.circular(4),
                            border:
                                Border.all(color: Color(0xF1F1F1FF), width: 1),
                          ),
                          alignment: Alignment.center,
                          child: Obx(() => Text(
                                '${element.size.value.height.round()}',
                                style: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF333333)),
                              )),
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('fit'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        47.horizontalSpace,
                        Expanded(
                          child: Container(
                            child: CustomRadioGroup<bool>(
                              values: [
                                true,
                                false,
                              ],
                              labels: [
                                AppLocalizations.of(context)!.translate('yes'),
                                AppLocalizations.of(context)!.translate('no'),
                              ],
                              groupValue: element.isFit.value,
                              onChanged: (mode) => controller
                                  .updateImageFit(element.id, mode),
                            ),
                          ),
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('effect'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        47.horizontalSpace,
                        Expanded(
                          child: Container(
                            child: CustomRadioGroup<ProcessMode>(
                              values: [
                                ProcessMode.none,
                                ProcessMode.bwLevel,
                                ProcessMode.colorLevel,
                                ProcessMode.bwDither,
                                ProcessMode.colorDither,
                                ProcessMode.colorDither2,
                                ProcessMode.bwRedDither,
                                ProcessMode.bwYellowDither,
                                ProcessMode.bwRedYellowDither
                              ],
                              labels: [
                                AppLocalizations.of(context)!.translate('original'),
                                AppLocalizations.of(context)!.translate('bw_level'),
                                AppLocalizations.of(context)!.translate('color_level'),
                                AppLocalizations.of(context)!.translate('bw_dither'),
                                AppLocalizations.of(context)!.translate('color_dither'),
                                AppLocalizations.of(context)!.translate('color_dither2'),
                                AppLocalizations.of(context)!.translate('bw_red_dither'),
                                AppLocalizations.of(context)!.translate('bw_yellow_dither'),
                                AppLocalizations.of(context)!.translate('bw_red_yellow_dither'),
                              ],
                              groupValue: element.processMode.value,
                              onChanged: (mode) => controller
                                  .updateImageProcessMode(element.id, mode),
                            ),
                          ),
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                  ],
                ),
              ),
              16.verticalSpace,
            ],
          )),
    );
  }
}

class TextElementEditor extends StatelessWidget {
  final TextBoardElement element;
  final EditTemplateController controller;

  const TextElementEditor({
    super.key,
    required this.element,
    required this.controller,
  });

  void _showFontPicker(BuildContext context) async {
    final FontManagerController fontManager = Get.put(FontManagerController());

    final result = await Get.bottomSheet(
      Container(
        height: 400.h,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.vertical(top: Radius.circular(16.r)),
        ),
        child: Column(
          children: [
            Container(
              height: 50.h,
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              decoration: BoxDecoration(
                border: Border(bottom: BorderSide(color: Colors.grey[200]!)),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(AppLocalizations.of(context)!.translate('font'),
                      style: TextStyle(
                          fontSize: 16.sp, fontWeight: FontWeight.bold)),
                  IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () => Get.back(),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: fontManager.getAllFonts().length,
                itemBuilder: (context, index) {
                  final font = fontManager.getAllFonts()[index];
                  return Obx(() => ListTile(
                        title: Text(
                          font.name,
                          style: TextStyle(fontFamily: font.name),
                        ),
                        trailing: element.fontFamily.value == font.name
                            ? Icon(Icons.check, color: Color(0xFF4CAF50))
                            : null,
                        onTap: () {
                          print('font.name: ${font.name}');
                          print('font.name: ${font.name}');
                          element.fontFamily.value = font.name;
                          Get.back();
                        },
                      ));
                },
              ),
            ),
          ],
        ),
      ),
      backgroundColor: Colors.transparent,
      isScrollControlled: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Color(0xFFF3F4F6),
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: Obx(() => Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: Get.width,
                height: 40.h,
                color: Color(0xFFFFFFFF),
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(AppLocalizations.of(context)!.translate('text'),
                        style: TextStyle(
                            fontSize: 15.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333))),
                    GestureDetector(
                      onTap: () => controller.deleteElement(element.id),
                      child: Image.asset(
                        'assets/images/Group 1321318595@2x.png',
                        width: 29.w,
                        height: 25.h,
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('content'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF333333),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('content'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Expanded(
                          child: SizedBox(
                            height: 36.h,
                            child: TextField(
                              style: TextStyle(fontSize: 15.sp),
                              controller: element.textController,
                              decoration: InputDecoration(
                                fillColor: Color(0xFFF6F7F9),
                                filled: true,
                                contentPadding:
                                    EdgeInsets.symmetric(horizontal: 14.w),
                                border: OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                  borderRadius: BorderRadius.circular(8.r),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('style'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('size'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Text(
                          '10',
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        Expanded(
                          child: Obx(() => SliderTheme(
                              data: SliderThemeData(
                                overlayShape: SliderComponentShape.noOverlay,
                                trackHeight: 6.h,
                                thumbShape: RoundSliderThumbShape(
                                  enabledThumbRadius: 8.r,
                                ),
                              ),
                              child: Slider(
                                value: element.fontSize.value,
                                min: 10,
                                max: 200,
                                onChanged: (value) {
                                  element.fontSize.value = value;
                                  // Create a TextPainter to measure new text dimensions
                                  final textPainter = TextPainter(
                                    text: TextSpan(
                                      text: element.text.value,
                                      style: TextStyle(
                                        fontSize: value,
                                        fontFamily: element.fontFamily.value,
                                      ),
                                    ),
                                    textDirection: TextDirection.ltr,
                                  )..layout();
                                  // Update element size based on new text measurements
                                  element.size.value = Size(
                                      textPainter.width, textPainter.height);
                                },
                              ))),
                        ),
                        Text(
                          '200',
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        12.horizontalSpace,
                        Container(
                          width: 51,
                          height: 36,
                          decoration: BoxDecoration(
                            color: Color(0xFFFFFFFF),
                            borderRadius: BorderRadius.circular(4),
                            border:
                                Border.all(color: Color(0xF1F1F1FF), width: 1),
                          ),
                          alignment: Alignment.center,
                          child: Obx(() => Text(
                                '${element.fontSize.value.round()}',
                                style: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF333333)),
                              )),
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('color'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        Spacer(),
                        CcolorRadioGroup(
                          values: [
                            Color(0xFFFF0000), // 替换 Colors.red
                            Color(0xFF000000), // 替换 Colors.black
                            Color(0xFFFFFFFF), // 替换 Colors.white
                          ],
                          groupValue: element.color.value,
                          onChanged: (color) => element.color.value = color,
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('italic'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  decoration: BoxDecoration(
                                    color: element.isItalic.value
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: IconButton(
                                    icon: Image.asset(
                                      'assets/images/Group 1321318650@2x.png',
                                      width: 15.w,
                                    ),
                                    onPressed: () => element.isItalic.value =
                                        !element.isItalic.value,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('weight'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  decoration: BoxDecoration(
                                    color: element.fontWeight.value ==
                                            FontWeight.bold
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: IconButton(
                                    icon: Image.asset(
                                      'assets/images/Vector@2x (2).png',
                                      width: 15.w,
                                    ),
                                    onPressed: () => element.fontWeight
                                        .value = element.fontWeight.value ==
                                                    FontWeight.bold
                                                ? FontWeight.normal
                                                : FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('align'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  decoration: BoxDecoration(
                                    color: element.textAlign.value ==
                                            TextAlign.left
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: IconButton(
                                    icon: Image.asset(
                                      'assets/images/Group 1321318652@2x.png',
                                      width: 15.w,
                                    ),
                                    onPressed: () => element.textAlign.value =
                                        TextAlign.left,
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: element.textAlign.value ==
                                            TextAlign.center
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318650@2x (1).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => element.textAlign.value =
                                          TextAlign.center,
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: element.textAlign.value ==
                                            TextAlign.right
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318653@2x.png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => element.textAlign.value =
                                          TextAlign.right,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('font'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Expanded(
                          child: GestureDetector(
                            onTap: () => _showFontPicker(context),
                            child: Container(
                              height: 36.h,
                              padding: EdgeInsets.symmetric(horizontal: 12.w),
                              decoration: BoxDecoration(
                                border: Border.all(color: Color(0xF1F1F1FF)),
                                borderRadius: BorderRadius.circular(4.r),
                              ),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    element.fontFamily.value,
                                    style: TextStyle(
                                      fontSize: 14.sp,
                                      fontFamily: element.fontFamily.value,
                                    ),
                                  ),
                                  Icon(Icons.arrow_drop_down,
                                      color: Colors.grey),
                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('coordinates'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('horizontal'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        35.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  decoration: BoxDecoration(
                                    color: controller.getHorizontalAlignment(
                                                element) ==
                                            1
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: IconButton(
                                    icon: Image.asset(
                                      'assets/images/Group 1321318648@2x.png',
                                      width: 15.w,
                                    ),
                                    onPressed: () => controller.alignHorizontal(
                                        element.id, 1),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getHorizontalAlignment(
                                                element) ==
                                            2
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318650@2x (2).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller
                                          .alignHorizontal(element.id, 2),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getHorizontalAlignment(
                                                element) ==
                                            3
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318649@2x.png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller
                                          .alignHorizontal(element.id, 3),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('vertical'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        35.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  decoration: BoxDecoration(
                                    color: controller.getVerticalAlignment(
                                                element) ==
                                            1
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: IconButton(
                                    icon: Image.asset(
                                      'assets/images/Group 1321318648@2x (1).png',
                                      width: 15.w,
                                    ),
                                    onPressed: () =>
                                        controller.alignVertical(element.id, 1),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getVerticalAlignment(
                                                element) ==
                                            2
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318650@2x (2).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller.alignVertical(
                                          element.id, 2),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getVerticalAlignment(
                                                element) ==
                                            3
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318649@2x (1).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller.alignVertical(
                                          element.id, 3),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('settings'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('locked'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        35.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 110.w,
                                  height: 36.h,
                                  decoration: BoxDecoration(
                                    color: element.isLocked.value
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    border: element.isLocked.value
                                        ? null
                                        : Border.all(
                                            color: Color(0xFFF1F1F1),
                                            width: 1.0,
                                          ),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: GestureDetector(
                                      onTap: () =>
                                          controller.toggleLocked(element.id),
                                      child: Text(
                                        AppLocalizations.of(context)!.translate('fixed_content'),
                                        style: TextStyle(
                                          fontSize: 14.sp,
                                          fontWeight: FontWeight.w400,
                                          letterSpacing: 0,
                                          color: Color(0xFF333333),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 110.w,
                                  height: 36.h,
                                  decoration: BoxDecoration(
                                    color: element.isLocked.value == false
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    border: element.isLocked.value == false
                                        ? null
                                        : Border.all(
                                            color: Color(0xFFF1F1F1),
                                            width: 1.0,
                                          ),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: GestureDetector(
                                      onTap: () =>
                                          controller.toggleLocked(element.id),
                                      child: Text(
                                        AppLocalizations.of(context)!.translate('variable_content'),
                                        style: TextStyle(
                                          fontSize: 14.sp,
                                          fontWeight: FontWeight.w400,
                                          letterSpacing: 0,
                                          color: Color(0xFF333333),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('scalable'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        35.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 110.w,
                                  height: 36.h,
                                  decoration: BoxDecoration(
                                    color: element.isScalable.value
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    border: element.isScalable.value
                                        ? null
                                        : Border.all(
                                            color: Color(0xFFF1F1F1),
                                            width: 1.0,
                                          ),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: GestureDetector(
                                      onTap: () =>
                                          controller.toggleScalable(element.id),
                                      child: Text(
                                        AppLocalizations.of(context)!.translate('overall_scaling'),
                                        style: TextStyle(
                                          fontSize: 14.sp,
                                          fontWeight: FontWeight.w400,
                                          letterSpacing: 0,
                                          color: Color(0xFF333333),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 110.w,
                                  height: 36.h,
                                  decoration: BoxDecoration(
                                    color: element.isScalable.value == false
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    border: element.isScalable.value == false
                                        ? null
                                        : Border.all(
                                            color: Color(0xFFF1F1F1),
                                            width: 1.0,
                                          ),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: GestureDetector(
                                      onTap: () =>
                                          controller.toggleScalable(element.id),
                                      child: Text(
                                        AppLocalizations.of(context)!.translate('width_scaling'),
                                        style: TextStyle(
                                          fontSize: 14.sp,
                                          fontWeight: FontWeight.w400,
                                          letterSpacing: 0,
                                          color: Color(0xFF333333),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                  ],
                ),
              ),
              16.verticalSpace
            ],
          )),
    );
  }
}

class ColorBlockElementEditor extends StatelessWidget {
  final ColorBlockBoardElement element;
  final EditTemplateController controller;

  const ColorBlockElementEditor({
    super.key,
    required this.element,
    required this.controller,
  });
  Widget _buildLayerButton(String label, String res, VoidCallback onPressed) {
    return Expanded(
      child: GestureDetector(
        onTap: onPressed,
        child: Column(
          children: [
            Image.asset(res, width: 20.w, height: 20.h),
            6.verticalSpace,
            Text(
              label,
              style: TextStyle(
                fontSize: 11.sp,
                fontWeight: FontWeight.w400,
                color: Color.fromRGBO(102, 102, 102, 1),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Obx(() => Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: Get.width,
                height: 40.h,
                color: Color(0xFFFFFFFF),
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(AppLocalizations.of(context)!.translate('color_block')),
                    GestureDetector(
                      onTap: () => controller.deleteElement(element.id),
                      child: Image.asset(
                        'assets/images/Group 1321318595@2x.png',
                        width: 29.w,
                        height: 25.h,
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('object'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('layer'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        70.horizontalSpace,
                        Expanded(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              _buildLayerButton(
                                AppLocalizations.of(context)!.translate('top'),
                                'assets/images/Group 1321318679@2x.png',
                                () => controller.bringToFront(),
                              ),
                              _buildLayerButton(
                                AppLocalizations.of(context)!.translate('down'),
                                'assets/images/Group 1321318680@2x.png',
                                () => controller.moveDown(),
                              ),
                              _buildLayerButton(
                                AppLocalizations.of(context)!.translate('up'),
                                'assets/images/Group 1321318681@2x.png',
                                () => controller.moveUp(),
                              ),
                              _buildLayerButton(
                                AppLocalizations.of(context)!.translate('bottom'),
                                'assets/images/Group 1321318682@2x.png',
                                () => controller.sendToBack(),
                              ),
                            ],
                          ).marginSymmetric(vertical: 8.h),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              // 横坐标调整
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('coordinates'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('horizontal'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        35.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  decoration: BoxDecoration(
                                    color: controller.getHorizontalAlignment(
                                                element) ==
                                            1
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: IconButton(
                                    icon: Image.asset(
                                      'assets/images/Group 1321318648@2x.png',
                                      width: 15.w,
                                    ),
                                    onPressed: () => controller.alignHorizontal(
                                        element.id, 1),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getHorizontalAlignment(
                                                element) ==
                                            2
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318650@2x (2).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller
                                          .alignHorizontal(element.id, 2),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getHorizontalAlignment(
                                                element) ==
                                            3
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318649@2x.png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller
                                          .alignHorizontal(element.id, 3),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('vertical'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        35.horizontalSpace,
                        Expanded(
                          child: Container(
                            height: 36.h,
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  decoration: BoxDecoration(
                                    color: controller.getVerticalAlignment(
                                                element) ==
                                            1
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: IconButton(
                                    icon: Image.asset(
                                      'assets/images/Group 1321318648@2x (1).png',
                                      width: 15.w,
                                    ),
                                    onPressed: () =>
                                        controller.alignVertical(element.id, 1),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getVerticalAlignment(
                                                element) ==
                                            2
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318650@2x (2).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller.alignVertical(
                                          element.id, 2),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 39.w,
                                  height: 28.h,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    color: controller.getVerticalAlignment(
                                                element) ==
                                            3
                                        ? Color(0xFFFFF3BD)
                                        : Color(0xFFFFFFFF),
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  child: Center(
                                    child: IconButton(
                                      icon: Image.asset(
                                        'assets/images/Group 1321318649@2x (1).png',
                                        width: 15.w,
                                      ),
                                      onPressed: () => controller.alignVertical(
                                          element.id, 3),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    ).marginSymmetric(vertical: 8.h),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('style'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('width'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Text(
                          '0',
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        Expanded(
                          child: Obx(() => SliderTheme(
                              data: SliderThemeData(
                                overlayShape: SliderComponentShape.noOverlay,
                                trackHeight: 6.h,
                                thumbShape: RoundSliderThumbShape(
                                  enabledThumbRadius: 8.r,
                                ),
                              ),
                              child: Slider(
                                value: element.size.value.width,
                                max: Get.width,
                                onChanged: (value) {
                                  final currentRight =
                                      element.position.value.dx +
                                          element.size.value.width;
                                  final newWidth = value;

                                  if (currentRight >
                                      controller.canvasSize.value.width) {
                                    // 如果右超出边界，固定右边界，调整左边位置
                                    final newX =
                                        controller.canvasSize.value.width -
                                            newWidth;
                                    controller.updateElementPosition(
                                      element.id,
                                      Offset(newX, element.position.value.dy),
                                    );
                                  }

                                  controller.updateElementSize(
                                    element.id,
                                    Size(newWidth, element.size.value.height),
                                  );
                                },
                              ))),
                        ),
                        Text(
                          Get.width.toStringAsFixed(0),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        12.horizontalSpace,
                        Container(
                          width: 51,
                          height: 36,
                          decoration: BoxDecoration(
                            color: Color(0xFFFFFFFF),
                            borderRadius: BorderRadius.circular(4),
                            border:
                                Border.all(color: Color(0xF1F1F1FF), width: 1),
                          ),
                          alignment: Alignment.center,
                          child: Obx(() => Text(
                                '${element.size.value.width.round()}',
                                style: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF333333)),
                              )),
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('height'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        52.horizontalSpace,
                        Text(
                          '0',
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        Expanded(
                          child: Obx(() => SliderTheme(
                              data: SliderThemeData(
                                overlayShape: SliderComponentShape.noOverlay,
                                trackHeight: 6.h,
                                thumbShape: RoundSliderThumbShape(
                                  enabledThumbRadius: 8.r,
                                ),
                              ),
                              child: Slider(
                                value: element.size.value.height,
                                max: controller.canvasSize.value.height,
                                onChanged: (value) {
                                  final currentBottom =
                                      element.position.value.dy +
                                          element.size.value.height;
                                  final newHeight = value;

                                  if (currentBottom >
                                      controller.canvasSize.value.height) {
                                    // 如果底部超出边界，固定底部边界，调整顶部位置
                                    final newY =
                                        controller.canvasSize.value.height -
                                            newHeight;
                                    controller.updateElementPosition(
                                      element.id,
                                      Offset(element.position.value.dx, newY),
                                    );
                                  }

                                  controller.updateElementSize(
                                    element.id,
                                    Size(element.size.value.width, newHeight),
                                  );
                                },
                              ))),
                        ),
                        Text(
                          controller.canvasSize.value.height.toStringAsFixed(0),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF666666),
                          ),
                        ),
                        12.horizontalSpace,
                        Container(
                          width: 51,
                          height: 36,
                          decoration: BoxDecoration(
                            color: Color(0xFFFFFFFF),
                            borderRadius: BorderRadius.circular(4),
                            border:
                                Border.all(color: Color(0xF1F1F1FF), width: 1),
                          ),
                          alignment: Alignment.center,
                          child: Obx(() => Text(
                                '${element.size.value.height.round()}',
                                style: TextStyle(
                                    fontSize: 14.sp, color: Color(0xFF333333)),
                              )),
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('color'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        Spacer(),
                        CcolorRadioGroup(
                          values: [
                            Color(0xFFFF0000), // 替换 Colors.red
                            Color(0xFF000000), // 替换 Colors.black
                            Color(0xFFFFFFFF), // 替换 Colors.white
                          ],
                          groupValue: element.color.value,
                          onChanged: (color) => element.color.value = color,
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                  ],
                ),
              ),
              16.verticalSpace,
            ],
          )),
    );
  }
}

class BackgroundEditor extends StatelessWidget {
  final EditTemplateController controller;
  final BackgroundBoardElement element;

  const BackgroundEditor({
    super.key,
    required this.controller,
    required this.element,
  });

  void _resetBackground() {
    element.backgroundColor.value = Colors.white;
    element.backgroundImagePath.value = '';
    element.processMode.value = ProcessMode.bwLevel;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Obx(() => Column(
            children: [
              Container(
                width: Get.width,
                height: 40.h,
                color: Color(0xFFFFFFFF),
                padding: EdgeInsets.symmetric(horizontal: 16.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(AppLocalizations.of(context)!.translate('background'),
                        style: TextStyle(
                            fontSize: 15.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333))),
                    GestureDetector(
                      onTap: _resetBackground,
                      child: Image.asset(
                        'assets/images/Group 1321318595@2x.png',
                        width: 29.w,
                        height: 25.h,
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
                padding: EdgeInsets.all(8.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      AppLocalizations.of(context)!.translate('style'),
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        letterSpacing: 0,
                        color: Color(0xFF999999),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('color'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        Spacer(),
                        CcolorRadioGroup(
                          values: [
                            Color(0xFFFF0000), // 替换 Colors.red
                            Color(0xFF000000), // 替换 Colors.black
                            Color(0xFFFFFFFF), // 替换 Colors.white
                          ],
                          groupValue: element.backgroundColor.value,
                          onChanged: (color) =>
                              element.backgroundColor.value = color,
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          AppLocalizations.of(context)!.translate('image'),
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            letterSpacing: 0,
                            color: Color(0xFF333333),
                          ),
                        ),
                        Spacer(),
                        GestureDetector(
                          onTap: () => controller.setBackgroundImage(element),
                          child: Container(
                            height: 36.h,
                            padding: EdgeInsets.symmetric(horizontal: 16.w),
                            decoration: BoxDecoration(
                              color: Color(0xFFFFFFFF),
                              borderRadius: BorderRadius.circular(4),
                              border: Border.all(
                                  color: Color(0xF1F1F1FF), width: 1),
                            ),
                            child: Center(
                              child: Row(
                                children: [
                                  Image.asset(
                                    'assets/images/Group 1321318693@2x.png',
                                    width: 19.w,
                                  ),
                                  6.horizontalSpace,
                                  Text(
                                    AppLocalizations.of(context)!.translate('system_album'),
                                    style: TextStyle(
                                      fontSize: 14,
                                      fontWeight: FontWeight.w400,
                                      letterSpacing: 0,
                                      color: Color(0xFF333333),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ],
                    ).marginSymmetric(vertical: 8.h),
                    if (element.backgroundImagePath.value.isNotEmpty)
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text(
                            AppLocalizations.of(context)!.translate('effect'),
                            style: TextStyle(
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w400,
                              letterSpacing: 0,
                              color: Color(0xFF333333),
                            ),
                          ),
                          47.horizontalSpace,
                          Expanded(
                            child: Container(
                              child: CustomRadioGroup<ProcessMode>(
                                values: [
                                  ProcessMode.none,
                                  ProcessMode.bwLevel,
                                  ProcessMode.colorLevel,
                                  ProcessMode.bwDither,
                                  ProcessMode.colorDither,
                                  ProcessMode.colorDither2,
                                  ProcessMode.bwRedDither,
                                  ProcessMode.bwYellowDither,
                                  ProcessMode.bwRedYellowDither
                                ],
                                labels: [
                                  AppLocalizations.of(context)!.translate('original'),
                                  AppLocalizations.of(context)!.translate('bw_level'),
                                  AppLocalizations.of(context)!.translate('color_level'),
                                  AppLocalizations.of(context)!.translate('bw_dither'),
                                  AppLocalizations.of(context)!.translate('color_dither'),
                                  AppLocalizations.of(context)!.translate('color_dither2'),
                                  AppLocalizations.of(context)!.translate('bw_red_dither'),
                                  AppLocalizations.of(context)!.translate('bw_yellow_dither'),
                                  AppLocalizations.of(context)!.translate('bw_red_yellow_dither'),
                                ],
                                groupValue: element.processMode.value,
                                onChanged: (mode) =>
                                    controller.updateBackgroundProcessMode(
                                        element.id, mode),
                              ),
                            ),
                          ),
                        ],
                      ).marginSymmetric(vertical: 8.h),
                  ],
                ),
              ),
            ],
          )),
    );
  }
}
